<template>
  <!-- 课程评价 -->
  <div class="body">
    <!-- <div class="header">
      <div>
        <img @click="returnGo" src="../../assets/homeimg/滑动左.png" />
        <span>课程评价</span>
      </div>
    </div> -->
    <div class="content">
      <div class="top">
        <img :src="obj.image" alt="">
        <div class="right">
          <div class="title">{{obj.name}}</div>
          <div>{{obj.title}}</div>
        </div>
      </div>
      <van-divider class="line">评价课程</van-divider>
      <div class="star">
        <van-rate v-model="value" :size="40" @change="onChange" />
      </div>
    </div>
    <div class="footer" @click="submit">确认评价</div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      obj:{},
      value:4,
    };
  },
  components: {},
  created() {
    this.obj = this.$route.query.item;
  },
  methods: {
     onChange(value){
       this.value = value
     },
     submit(){
       this.$http.post('/api/course/evalu_info',{course_id:this.obj.course_id}).then(res => {
         Toast.success('评价成功');
         this.$router.back();
       })
     }
  }
};
</script>

<style scoped lang="scss">
.body {
  color: #333333;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fafafa;
}
.content{
  width: 92vw;
  margin: 3vw auto 0;
  
  .top{
    display: flex;
    justify-content: flex-start;
    align-content: center;
    height: 39.466vw;
    background-color: #fff;
    padding: 2vw;
    box-sizing: border-box; 
  }
  img{
    width: 26.66vw;
    height: 33vw;
    margin-right: 2.2vw;
  }
  .right{
     div{
      font-size:12px;
      font-family:PingFang SC;
      font-weight:500;
      color:rgba(101,101,101,1);
    }
    .title{
      font-size:15px;
      font-family:PingFang SC;
      font-weight:bold;
      color:rgba(51,51,51,1);
      margin-bottom: .533333rem
    }
  }
 
  .line{
    margin-bottom: 4vw;
    margin-top: 19vw;
  }
  .star{
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
}
.footer{
  width:78.66vw;
  height:11.73vw;
  background:linear-gradient(90deg,rgba(255,209,65,1) 0%,rgba(255,175,7,1) 100%);
  border-radius: 44px;
  line-height: 11.73vw;
  text-align: center;
  font-size:18px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(255,255,255,1);
  margin: 19vw auto 0;
}
.header {
  // font-weight: bold;
  width: 100%;
  text-align: center;
  height: 3.125rem;
  line-height: 3.125rem;
  position: relative;
  border-bottom: 1px solid #dcdcdc;
  color: #333333;
  font-size: 1.25rem;
  img {
    width: 0.625rem;
    height: 1.125rem;
    position: absolute;
    left: 1rem;
    bottom: 0.875rem;
  }
}
</style>
